<!--  -->
<template>
  <div>
    <el-container > 
      <!-- 头部 -->
      <el-header>
        <div>
        <img class="home_img" src="../assets/imags/bgmLogo/home_head.png" alt="">
        <span>宠物商城管理系统</span>
        </div> 
        <el-button @click="logout" type="info" class="logout">退出</el-button>
      </el-header>
    <el-container class="home-container"> 
      <!-- 左侧导航栏区域 -->
        <Tabbar></Tabbar>
        <el-main><router-view></router-view></el-main>
      </el-container>
   </el-container>
  </div>
</template>

<script>
import Tabbar from './Tabbar'
export default {
  name:"Home",
  data() {
      return {
      
      };
    },
    components:{
      Tabbar
    },
    methods: {
      logout(){
        this.$router.push("/login");
      },
     
    }

}

</script>
<style lang='less' scoped>
.home-container{
  height: 650px;
}
.el-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #373d43;
  font-weight: 700;
  color: white;
  font-size: 30px;
   div {
    display: flex;
    align-items: center;
    span{
      margin-left: 20px;
    }
  }
}
.el-aside{
  background-color: #333740;
}
.el-main{
  background-color: #eaedf2;
}

.home_img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>